
<template>
	<div class="zhaomufenxiaoyuan">
    <div v-if="!shoujiban">

          <!-- 店铺 -->
          <div class="flex" v-if="act == 2" style="margin-top: 50px;">
            <div style="width: 680px; height: 1200px; border: 1px #eaeaea solid;">
              <canvas id="canvas"></canvas>
            </div>
            <div style="margin-left: 40px;">
              <div class="flexc" style="margin-bottom: 20px;">
                <div style="margin-right: 20px; font-weight: bold;">基础设置</div>
                <div style="color: rgb(175, 179, 188); font-size: 14px;">设置后分销员可在分销中心推广</div>
              </div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div style="margin-right: 20px; color: rgb(64, 66, 71); font-size: 14px;">选择模板</div>
                <div>
                  <el-select v-model="all.store_template" @change="changes()" style="width: 100%;" placeholder="">
                    <el-option  label="模板1" :value="1"> </el-option>
                    <el-option  label="模板2" :value="2"> </el-option>
                  </el-select>
                </div>
              </div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div style="margin-right: 20px; color: rgb(64, 66, 71); font-size: 14px;">选择图片</div>
                <div>
                  <div style="width: 200px;">
                    <chuantu :widths="'200px'" :heights="'200px'" :widths2="'200px'" :heights2="'200px'" :imgs="all.store_img" @getimg="getimg" v-if="relo"></chuantu>
                  </div>
                  <div style="margin-top: 10px; font-size: 12px; color: rgb(175, 179, 188);">最佳尺寸：680×1200像素，尺寸不匹配时，图片将被压缩或拉伸</div>
                </div>
              </div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div style="margin-right: 20px; color: rgb(64, 66, 71); font-size: 14px;">二维码</div>
                <div>
                  <div ref="qrCodeUrl2" id="qrCodeUrl2" style="width: 100px;"></div>
                </div>
              </div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div style="margin-right: 20px; color: rgb(64, 66, 71); font-size: 14px;">编辑文字</div>
                <div>

                  <el-input v-model="all.store_des"  :maxlength="20" @input="changes()" style="width: 100%;" placeholder="介绍店铺"></el-input>
                  <div style="color: rgb(175, 179, 188); font-size: 12px; margin-top: 10px;">写一段文字介绍店铺，最多不超过20个字</div>
                </div>
              </div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div style="margin-right: 20px; color: rgb(64, 66, 71); font-size: 14px;">文字颜色</div>
                <div><el-color-picker @change="haibao()" v-model="all.store_color"></el-color-picker></div>
              </div>
              <!-- <div class="flexc">
                <div style="margin-right: 20px;"><el-button @click="chongzhi(2)"  round >重置</el-button></div>
                <div><el-button @click="baocun(2)" type="primary" round >保存</el-button></div>
              </div> -->
            </div>
          </div>

    </div>

    <div v-if="shoujiban" style="padding: 0.3rem; background: #fff; color: rgb(2, 12, 29); font-size: 0.24rem;  padding-top: 0.3rem;">
        <div class="flexc" style="margin-bottom: 20px;">
          <div style="margin-right: 20px; font-weight: bold;">基础设置</div>
          <div style="color: rgb(175, 179, 188); font-size: 14px;">设置后分销员可在分销中心推广</div>
        </div>
        <div class="flexc" style="margin-bottom: 20px;">
          <div style="margin-right: 20px; color: rgb(64, 66, 71); font-size: 14px;">选择模板</div>
          <div>
            <el-select v-model="all.store_template" @change="changes()" style="width: 100%;" placeholder="">
              <el-option  label="模板1" :value="1"> </el-option>
              <el-option  label="模板2" :value="2"> </el-option>
            </el-select>
          </div>
        </div>
        <div class="flexc" style="margin-bottom: 20px;">
          <div style="margin-right: 10px; color: rgb(64, 66, 71); font-size: 14px;">选择图片</div>
          <div style="width: 200px;">
            <div>
              <chuantu :widths="'200px'" :heights="'200px'" :widths2="'200px'" :heights2="'200px'" :imgs="all.store_img" @getimg="getimg" v-if="relo"></chuantu>
            </div>
            <div style="margin-top: 10px; font-size: 12px; color: rgb(175, 179, 188);">最佳尺寸：680×1200像素，尺寸不匹配时，图片将被压缩或拉伸</div>
          </div>
        </div>
        <div class="flexc" style="margin-bottom: 20px;">
          <div style="margin-right: 20px; color: rgb(64, 66, 71); font-size: 14px;">二维码</div>
          <div>
            <div ref="qrCodeUrl2" id="qrCodeUrl2" style="width: 100px;"></div>
          </div>
        </div>
        <div class="flexc" style="margin-bottom: 20px;">
          <div style="margin-right: 20px; color: rgb(64, 66, 71); font-size: 14px;">编辑文字</div>
          <div>
            <el-input v-model="all.store_des"  :maxlength="20" @input="changes()" style="width: 100%;" placeholder="介绍店铺"></el-input>
            <div style="color: rgb(175, 179, 188); font-size: 12px; margin-top: 10px;">写一段文字介绍店铺，最多不超过20个字</div>
          </div>
        </div>
        <div class="flexc" style="margin-bottom: 20px;">
          <div style="margin-right: 20px; color: rgb(64, 66, 71); font-size: 14px;">文字颜色</div>
          <div><el-color-picker @change="haibao()" v-model="all.store_color"></el-color-picker></div>
        </div>
        <div class="flexc">
          <!-- <div style="margin-right: 20px;"><el-button @click="chongzhi(2)"  round >重置</el-button></div> -->
          <!-- <div><el-button @click="baocun(2)" type="primary" round >保存</el-button></div> -->
        </div>
      </div>
      <el-dialog title="海报预览" :visible.sync="loghaibao" width="440px" :close-on-click-modal="false" :close-on-press-escape="false" :modal-append-to-body="false">
        <div>
          <img :src="all.store_poster">
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button round @click="loghaibao = false">关闭</el-button>
        </span>
      </el-dialog>
    </div>
	</div>
</template>

<script>
  import left from '../left.vue'
  import top from '../top.vue'
  import footers from '../footer.vue'
  import topandleft from '../topandleft.vue'
  import chuantu from '@/components/chuantu.vue'
  import QRCode from 'qrcodejs2'
  import * as qiniu from 'qiniu-js'
	export default {
		name: 'zhaomufenxiaoyuan',
    components:{
      left,top,topandleft,chuantu,footers
    },
		data() {
			return {
        act:2,
        search:{
          page:1,
          page_size:20,
        },
        all:{
          inv_template:'2',
          inv_color:"#000",
          inv_des:"欢迎加入",
          inv_img:"",
          inv_poster:""
        },
        relo:true,

        image2:localStorage.getItem('left_logo') || "https://gperson.gantanhaokeji.top/1702001182573ge93mxjdr4a.jpg",
        image3:"https://gperson.gantanhaokeji.top/1702001182573ge93mxjdr4a.jpg",
        image4:"https://gperson.gantanhaokeji.top/1702001182573ge93mxjdr4a.jpg",
        list:[],
        total:0,
        widthss:false,
        shoujiban:false,
        loading: false,
        finished: false,

        copyurl:"",
        haibaodizhi:"",
        canvas:"",
        loghaibao:false
			}
		},
		created() {

		},
		mounted() {
      if(window.screen.width == 1920){
        this.widthss = true
      }
      if(window.screen.width < 1080){
        this.shoujiban = true
        var h = document.documentElement.clientWidth / 7.5 + 'px';
        document.documentElement.style.fontSize = h;

      }else{

      }


      // this.wailian = location.origin + '/h5/index?shop_id=' + JSON.parse(localStorage.getItem('user')).id
      // let wailian = location.origin + '/h5/index'

      // this.$refs.qrCodeUrl.innerHTML = '';
      // var qrcode = new QRCode(this.$refs.qrCodeUrl, {
      //     text: wailian, // 需要转换为二维码的内容
      //     width: 200,
      //     height: 200,
      //     colorDark: '#000000',
      //     colorLight: '#ffffff',
      //     correctLevel: QRCode.CorrectLevel.H
      // })


      let p = this.getsharelink()
      p.then(res=>{
        this.$refs.qrCodeUrl2.innerHTML = '';
        var qrcode = new QRCode(this.$refs.qrCodeUrl2, {
            text: this.copyurl, // 需要转换为二维码的内容
            width: 200,
            height: 200,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        })

        this.getinfo()
      })

		},
		methods: {
      baocundeneirongv:function(){
        
        this.$emit('baocundeneirongv',this.all)
      },
      postk:function(){
        axios.post('/agent/join/switch',{join_switch:this.all.join_switch}).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.$message.success('保存成功');
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      //获取邀请链接
      getsharelink(){
        //获取当前链接
        return new Promise((res,rej)=>{
          axios.get('/agent/reseller/check-code').then((response)=>{
          	if (response.data.msg.code == 0) {
              // this.copyurl = window.origin+'/hou/login?'+encodeURIComponent(response.data.data);
              if(this.$route.query.shop_id){

                // const en = window.btoa(code); // 加密
                // const de = window.atob(en); // 解密

                this.copyurl = location.origin + '/h5/index?shop_id='+ window.btoa(this.$route.query.shop_id)
              }else{
                this.copyurl = location.origin + '/h5/index'
              }
              console.log(this.copyurl)

              this.$refs.qrCodeUrl2.innerHTML = '';
              var qrcode = new QRCode(this.$refs.qrCodeUrl2, {
                  text: this.copyurl,
                  width: 200,
                  height: 200,
                  colorDark: '#000000',
                  colorLight: '#ffffff',
                  correctLevel: QRCode.CorrectLevel.H
              })
              res('ok')
          	} else {
          		this.$message.error(response.data.msg.info);
          	}
          })
        })

      },
      getinfo:function(){

        let url = ""
        if(this.$route.query.shop_id){
          //有shop_id是 分销商端店铺  再有id是分销商多商品页面
          if(this.$route.query.id){
            url = `/api/flow/storeinfo?id=${this.$route.query.id}`
          }else{
            url = `/agent/mstore/info?shop_id=${this.$route.query.shop_id}`
          }
        }else{
          //管理员端 没有id是店铺  有id是多商品页面
          if(this.$route.query.id){
            url = `/api/flow/storeinfo?id=${this.$route.query.id}`
          }else{
            url = `/own/mstore/info`
          }
        }

        axios.get(url).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.image3 = response.data.data.left_pic
            this.store_name = response.data.data.store_name
            this.getf()
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      changeact:function(w){
        this.act = w
        this.$nextTick(()=>{
          if(this.act == 1){

            this.$refs.qrCodeUrl.innerHTML = '';
            var qrcode = new QRCode(this.$refs.qrCodeUrl, {
                text:this.copyurl, // 需要转换为二维码的内容
                width: 200,
                height: 200,
                colorDark: '#000000',
                colorLight: '#ffffff',
                correctLevel: QRCode.CorrectLevel.H
            })
          }
          if(this.act == 2){
            let wailian = location.origin + '/h5/index'

            this.$refs.qrCodeUrl2.innerHTML = '';
            var qrcode = new QRCode(this.$refs.qrCodeUrl2, {
                text: wailian,
                width: 200,
                height: 200,
                colorDark: '#000000',
                colorLight: '#ffffff',
                correctLevel: QRCode.CorrectLevel.H
            })
          }
          setTimeout(()=>{
            this.getf()
          },1000)

        })
      },
      getRandomChar:function(len = 11)  {
        var  x = "0123456789qwertyuioplkjhgfdsazxcvbnm" // 需要什么字符这里添加
        var  tmp = ""
        var timestamp = new Date().getTime();
        for(var  i=0;i<len;i++)  {
          tmp += x.charAt(Math.ceil(Math.random()*100000000)%x.length);
        }
        return  timestamp+tmp;
      },
      //单个图片上传
      uploadok: function(file,t) {
        let name = this.getRandomChar() + '.' + 'png'
        var that = this
        axios.post(`/api/qiniu/uploadtoken`,{name:name})
          .then(response => {
            if(response.data.msg.code == 0){

              const observer = {
                next(res){
                  console.log(res)
                  // ...
                },
                error(err){
                  console.log(err)
                  // ...
                },
                complete(res){
                  if(t == 1){
                    that.all.inv_poster = 'https://gperson.gantanhaokeji.top/'+ res.key
                  }

                  if(t == 2){
                    that.all.store_poster = 'https://gperson.gantanhaokeji.top/'+ res.key
                    that.loghaibao = true
                  }

                  that.postf()
                }
              }

              const observable = qiniu.upload(file, name, response.data.data.token, {}, {})

              const subscription = observable.subscribe(observer) // 上传开始

            }else{
              this.$message.error(response.data.msg.info);
            }
          });


      },
      getf:function(){
        axios.get('/agent/poster/get').then((response)=>{
        	if (response.data.msg.code == 0) {
            this.all = response.data.data

            this.relo = false
            this.$nextTick(()=>{
              this.relo = true
            })

            setTimeout(()=>{
              let img = ''
              if(this.act == 1){
                img = document.getElementById('qrCodeUrl').getElementsByTagName('img')
              }
              if(this.act == 2){
                img = document.getElementById('qrCodeUrl2').getElementsByTagName('img')
              }
              this.image4 = img[0].src
              this.haibao()
            },1000)

        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      postf:function(){
        axios.post('/agent/poster/update',this.all).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.$message.success('保存成功');
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      dataURLtoFile:function(dataurl, filename) {
      	let arr = dataurl.split(',');
      	let mime = arr[0].match(/:(.*?);/)[1];
      	let bstr = atob(arr[1]);
      	let n = bstr.length;
      	let u8arr = new Uint8Array(n);
      	while (n--) {
      		u8arr[n] = bstr.charCodeAt(n);
      	}
      	return new File([u8arr], filename, {
      		type: mime
      	});
      },

      chongzhi:function(){
        if(this.act == 1){
          this.all.inv_color = '#fff'
          this.all.inv_template = 1
          this.all.inv_des = ''
          this.all.inv_poster = ''
          this.all.inv_img = ''
        }
        if(this.act == 2){
          this.all.store_color = '#fff'
          this.all.store_template = 1
          this.all.store_des = ''
          this.all.store_poster = ''
          this.all.store_img = ''
        }
        this.relo = false
        this.$nextTick(()=>{
          this.relo = true
        })
        this.haibao()
      },

      baocun:function(t){
        if(t == 1){
          if(this.all.inv_img  == ''){
            this.$message.error('请先上传图片');
            return false
          }
        }
        if(t == 2){
          if(this.all.store_img  == ''){
            this.$message.error('请先上传图片');
            return false
          }
        }
        if(this.shoujiban){
          var myCanvas = this.canvas
        }else{
          var myCanvas = document.getElementById('canvas')
        }
        let file = this.dataURLtoFile(myCanvas.toDataURL('image/jpg'),'haibao')
        this.uploadok(file,t)
        // this.postf()
        // let a = document.createElement("a");
        // a.href = myCanvas.toDataURL('image/jpg')
        // a.download = "海报图"
        // document.body.appendChild(a)
        // a.click()
        // document.body.removeChild(a)

        // // 创建一个a节点
        // const a = document.createElement('a')
        // // 设置a的href属性将canvas变成png格式
        // const imgURL = myCanvas[0].toDataURL('image/jpg')
        // const ua = navigator.userAgent
        // if (ua.indexOf('Trident') !== -1 && ua.indexOf('Windows') !== -1) { // IE内核 并且  windows系统 情况下 才执行;
        // 	var bstr = atob(imgURL.split(',')[1])
        // 	var n = bstr.length
        // 	var u8arr = new Uint8Array(n)
        // 	while (n--) {
        // 		u8arr[n] = bstr.charCodeAt(n)
        // 	}
        // 	const blob = new Blob([u8arr])
        // 	window.navigator.msSaveOrOpenBlob(blob, '下载' + '.' + 'png')
        // } else if (ua.indexOf('Firefox') > -1) { // 火狐兼容下载
        // 	const blob = this.base64ToBlob(imgURL); //new Blob([content]);
        // 	const evt = document.createEvent("HTMLEvents");
        // 	evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
        // 	a.download = ' '; //下载图片名称，如果填内容识别不到，下载为未知文件，所以我这里就不填为空
        // 	a.href = URL.createObjectURL(blob);
        // 	a.dispatchEvent(new MouseEvent('click', {
        // 		bubbles: true,
        // 		cancelable: true,
        // 		view: window
        // 	}));
        // } else { // 谷歌兼容下载
        // 	img.src = myCanvas[0].toDataURL('image/jpg')
        // 	a.href = img.src
        // 	// 设置下载文件的名字
        // 	a.download = '下单页二维码';
        // 	// 点击
        // 	a.click();
        // 	vant.Toast('已保存');
        // }
      },
      // base64转blob
      base64ToBlob(code) {
      	let parts = code.split(';base64,');
      	let contentType = parts[0].split(':')[1];
      	let raw = window.atob(parts[1]);
      	let rawLength = raw.length;
      	let uInt8Array = new Uint8Array(rawLength);
      	for (let i = 0; i < rawLength; ++i) {
      		uInt8Array[i] = raw.charCodeAt(i);
      	}
      	return new Blob([uInt8Array], {
      		type: contentType
      	});
      },
      changes:function(){
        this.haibao()
      },
      haibao:function(){
        if(this.act == 1){
          if(this.all.inv_template == 1){
            var that = this
            var canvas = document.getElementById('canvas');
            canvas.width = 340
            canvas.height = 600
            var ctx = canvas.getContext('2d');
            var img = new Image();
            let p = new Promise((res,rej)=>{
            	img.src = this.all.inv_img
            	img.setAttribute("crossOrigin",'Anonymous')
            	img.onload = function() {
            		let img_w = 340
            		let bili = 340 / img.width
            		let img_h = parseInt(img.height * bili)
            		ctx.drawImage(img,0,0,img_w,img_h);
            		res('ok')
            	}
            })
            p.then(()=>{
            	var img2 = new Image();
            	img2.src = this.image2
            	img2.setAttribute("crossOrigin",'Anonymous')
            	img2.onload = function() {
                ctx.save();
                ctx.beginPath();
                ctx.arc(30, 30, 10, 0, Math.PI * 2, false);
                ctx.clip();
                ctx.drawImage(img2,20,20,20,20);
                ctx.restore();
            	}
              // ctx.textBaseline="middle";
              // ctx.fillStyle = this.all.inv_color;
              // ctx.lineHeight = '20px';
              // ctx.font = "12px '微软雅黑'";
              // ctx.fillText(localStorage.getItem('shop_name'), 50,30)

              var img3 = new Image();
              img3.src = this.image3
              img3.setAttribute("crossOrigin",'Anonymous')
              img3.onload = function() {
                ctx.save();
                ctx.beginPath();
                ctx.arc(170, 170, 22.5, 0, Math.PI * 2, false);
                ctx.clip();
                ctx.drawImage(img3,147.5,147.5,45,45);
                ctx.restore();
              }

              ctx.textBaseline="middle";
              ctx.fillStyle = this.all.inv_color;
              ctx.fontWeight = 'bold'
              ctx.lineHeight = '40px';
              ctx.font = "16px '微软雅黑'";
              ctx.textAlign="center";
              ctx.fillText(localStorage.getItem('shop_name'), 170,210)

              ctx.textBaseline="middle";
              ctx.fillStyle = this.all.inv_color;
              ctx.lineHeight = '40px';
              ctx.font = "14px '微软雅黑'";
              ctx.textAlign="center";
              ctx.fillText(this.all.inv_des, 170,240)


              var img4 = new Image();
              img4.src = this.image4
              img4.setAttribute("crossOrigin",'Anonymous')
              img4.onload = function() {
                ctx.drawImage(img4,120,270,100,100);
              }

            })
          }
          if(this.all.inv_template == 2){
            var that = this
            var canvas = document.getElementById('canvas');
            canvas.width = 340
            canvas.height = 600
            var ctx = canvas.getContext('2d');
            var img = new Image();
            let p = new Promise((res,rej)=>{
            	img.src = this.all.inv_img
            	img.setAttribute("crossOrigin",'Anonymous')
            	img.onload = function() {
            		let img_w = 340
            		let bili = 340 / img.width
            		let img_h = parseInt(img.height * bili)
            		ctx.drawImage(img,0,0,img_w,img_h);
            		res('ok')
            	}
            })
            p.then(()=>{
            	var img2 = new Image();
            	img2.src = this.image2
            	img2.setAttribute("crossOrigin",'Anonymous')
            	img2.onload = function() {
                ctx.save();
                ctx.beginPath();
                ctx.arc(30, 30, 10, 0, Math.PI * 2, false);
                ctx.clip();
                ctx.drawImage(img2,20,20,20,20);
                ctx.restore();
            	}
              ctx.textBaseline="middle";
              ctx.fillStyle = this.all.inv_color;
              ctx.lineHeight = '20px';
              ctx.font = "12px '微软雅黑'";
              // ctx.fillText(localStorage.getItem('shop_name'), 50,30)
              ctx.fillText(this.store_name, 50,30)

              var img3 = new Image();
              img3.src = this.image3
              img3.setAttribute("crossOrigin",'Anonymous')
              img3.onload = function() {
                ctx.save();
                ctx.beginPath();
                ctx.arc(82.5, 432.5, 22.5, 0, Math.PI * 2, false);
                ctx.clip();
                ctx.drawImage(img3,60,410,45,45);
                ctx.restore();
              }

              ctx.textBaseline="middle";
              ctx.fillStyle = this.all.inv_color;
              ctx.fontWeight = 'bold'
              ctx.lineHeight = '40px';
              ctx.font = "16px '微软雅黑'";
              ctx.textAlign="center";


              // ctx.fillText(JSON.parse(localStorage.getItem('user')).name, 82.5,480)
              ctx.fillText(this.store_name, 82.5,480)


              ctx.textBaseline ="middle";
              ctx.fillStyle = this.all.inv_color;
              ctx.lineHeight = '40px';
              ctx.font = "12px '微软雅黑'";
              ctx.textAlign = "center";

              ctx.fillText(`${this.all.inv_des}`, 82.5,510)
              // ctx.fillText('推广赚佣金', 82.5,535)


              var img4 = new Image();
              img4.src = this.image4
              img4.setAttribute("crossOrigin",'Anonymous')
              img4.onload = function() {
                ctx.drawImage(img4,200,410,100,100);
              }

            })
          }
        }
        if(this.act == 2){
          if(this.all.store_template == 1){
            var that = this
            if(this.shoujiban){
              var canvas = document.createElement('canvas');
              this.canvas = canvas
            }else{
              var canvas = document.getElementById('canvas');
            }
            canvas.width = 340 * 2
            canvas.height = 600 * 2
            var ctx = canvas.getContext('2d');
            var img = new Image();
            let p = new Promise((res,rej)=>{
            	img.src = this.all.store_img
            	img.setAttribute("crossOrigin",'Anonymous')
            	img.onload = function() {
            		let img_w = 340 * 2
            		let bili = 340 * 2 / img.width
            		let img_h = parseInt(img.height * bili)
            		ctx.drawImage(img,0,0,img_w,img_h);
            		res('ok')
            	}
            })
            p.then(()=>{
            	var img2 = new Image();
            	img2.src = this.image2
            	img2.setAttribute("crossOrigin",'Anonymous')
            	img2.onload = function() {
                // ctx.save();
                // ctx.beginPath();
                // ctx.arc(30 * 2, 30 * 2, 10 * 2, 0, Math.PI * 2, false);
                // ctx.clip();
                // ctx.drawImage(img2,20 * 2,20 * 2,20 * 2,20 * 2);
                // ctx.restore();
            	}
              ctx.textBaseline="middle";
              ctx.fillStyle = this.all.store_color;
              ctx.lineHeight = '20px';
              ctx.font = "12px '微软雅黑'";
              // ctx.fillText(localStorage.getItem('shop_name'), 50 * 2,30 * 2)
              // ctx.fillText(this.store_name, 50 * 2,30 * 2)


              var img3 = new Image();
              img3.src = this.image3
              img3.setAttribute("crossOrigin",'Anonymous')
              img3.onload = function() {
                // ctx.save();
                // ctx.beginPath();
                // ctx.arc(170 * 2, 170 * 2, 22.5 * 2, 0, Math.PI * 2, false);
                // ctx.clip();
                // ctx.drawImage(img3,147.5 * 2,147.5 * 2,45 * 2,45 * 2);
                // ctx.restore();
                ctx.save();
                ctx.beginPath();
                ctx.arc(340, 389, 78, 0, Math.PI * 2, false);
                ctx.clip();
                ctx.drawImage(img3,262,311,156,156);
                ctx.restore();
              }

              ctx.textBaseline="middle";
              ctx.fillStyle = this.all.store_color;
              ctx.fontWeight = 'bold'
              ctx.lineHeight = '42px';
              ctx.font = "36px '微软雅黑'";
              ctx.textAlign="center";
              // ctx.fillText(localStorage.getItem('shop_name'), 170 * 2,210 * 2)
              ctx.fillText(this.store_name, 170 * 2,503)

              ctx.textBaseline="middle";
              ctx.fillStyle = this.all.store_color;
              ctx.lineHeight = '76px';
              ctx.font = "32px '微软雅黑'";
              ctx.textAlign="center";
              // ctx.fillText(this.all.store_des, 170 * 2,568)
              let hang1 = this.all.store_des.substring(0,12) || ''
              let hang2 = this.all.store_des.substring(12,26) || ''
              ctx.fillText(hang1, 340,568)

              ctx.fillText(hang2, 340,610)


              var img4 = new Image();
              img4.src = this.image4
              img4.setAttribute("crossOrigin",'Anonymous')
              img4.onload = function() {
                ctx.drawImage(img4,235,683,234,234);
              }

            })
          }
          if(this.all.store_template == 2){
            var that = this
            if(this.shoujiban){
              var canvas = document.createElement('canvas');
              this.canvas = canvas
            }else{
              var canvas = document.getElementById('canvas');
            }
            canvas.width = 340 * 2
            canvas.height = 600 * 2
            var ctx = canvas.getContext('2d');
            var img = new Image();
            let p = new Promise((res,rej)=>{
            	img.src = this.all.store_img
            	img.setAttribute("crossOrigin",'Anonymous')
            	img.onload = function() {
            		let img_w = 340 * 2
            		let bili = 340 * 2 / img.width
            		let img_h = parseInt(img.height * bili)
            		ctx.drawImage(img,0,0,img_w,img_h);
            		res('ok')
            	}
            })
            p.then(()=>{
            	var img2 = new Image();
            	img2.src = this.image2
            	img2.setAttribute("crossOrigin",'Anonymous')
            	img2.onload = function() {
                // ctx.save();
                // ctx.beginPath();
                // ctx.arc(30 * 2, 30 * 2, 10 * 2, 0, Math.PI * 2, false);
                // ctx.clip();
                // ctx.drawImage(img2,20 * 2,20 * 2,20 * 2,20 * 2);
                // ctx.restore();
            	}
              ctx.textBaseline="middle";
              ctx.fillStyle = this.all.store_color;
              ctx.lineHeight = '20px';
              ctx.font = "12px '微软雅黑'";
              // ctx.fillText(localStorage.getItem('shop_name'), 50 * 2,30 * 2)
              // ctx.fillText(this.store_name, 50 * 2,30 * 2)

              var img3 = new Image();
              img3.src = this.image3
              img3.setAttribute("crossOrigin",'Anonymous')
              img3.onload = function() {
                ctx.save();
                ctx.beginPath();
                ctx.arc(175.5, 955.5, 57.5, 0, Math.PI * 2, false);
                ctx.clip();
                ctx.drawImage(img3,118,898,115,115);
                ctx.restore();
              }

              ctx.textBaseline="middle";
              ctx.fillStyle = this.all.store_color;
              ctx.fontWeight = 'bold'
              ctx.lineHeight = '35px';
              ctx.font = "30px '微软雅黑'";
              ctx.textAlign="center";


              // ctx.fillText(JSON.parse(localStorage.getItem('user')).name, 82.5 * 2,480 * 2)
              ctx.fillText(this.store_name, 175,1050)


              ctx.textBaseline ="middle";
              ctx.fillStyle = this.all.store_color;
              ctx.lineHeight = '40px';
              ctx.font = "28px '微软雅黑'";
              ctx.textAlign = "center";

              // ctx.fillText(`${this.all.store_des}`, 175,1130)
              let hang1 = this.all.store_des.substring(0,12) || ''
              let hang2 = this.all.store_des.substring(12,26) || ''
              ctx.fillText(hang1, 175,1090)

              ctx.fillText(hang2, 175,1130)
              // ctx.fillText('推广赚佣金', 82.5,535)


              var img4 = new Image();
              img4.src = this.image4
              img4.setAttribute("crossOrigin",'Anonymous')
              img4.onload = function() {
                ctx.drawImage(img4,415,905,212,212);
              }

            })
          }
        }

      },
      getimg:function(item){
        if(this.act == 1){
          this.all.inv_img = item
        }
        if(this.act == 2){
          this.all.store_img = item
        }

        this.haibao()
      },


		}
	}
</script>


<style scoped lang="less">
  .zhaomufenxiaoyuan{
    /deep/ .el-switch__core{ width: 85px !important; height: 41px; border-radius: 20px; background: rgb(246, 248, 251); border: 1px solid rgb(227, 232, 241);}
    /deep/ .el-switch.is-checked .el-switch__core {
        border-color: #005aff !important;
        background-color: #005aff !important;
    }
    /deep/ .el-switch.is-checked .el-switch__core::after{margin-left: -33px; left: 100% !important;}
    /deep/ .el-switch__core:after{ width: 31px; height: 31px;  top: 4px; left: 4px; background: rgb(227, 232, 241);}
  }
</style>
